import React, { useEffect } from 'react';
import { Modal, Form, Input, Button, message } from 'antd';
import { createDebate, updateDebate } from '@/services/debate';
const { TextArea } = Input;
function DebateModal ( props ) {

    const [ form ] = Form.useForm();
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    };

    useEffect( () => {
        form.setFieldsValue( props.current || {} );
    } );
    const handleReset = () => {
        form.resetFields();
    };

    const handleSubmit = async ( value ) => {
        console.log( value );

        const id = props.current._id;
        console.log( id );
        if ( !id )
        {
            const res = await createDebate( value );
            if ( res.code == 0 )
            {
                message.success( '创建成功' );
            }
        } else
        {
            const values = { ...value, id };
            const res = await updateDebate( values );
            if ( res.code == 0 )
            {
                message.success( '编辑成功' );
            }
        }

        handleReset();
        handleModalClose();
    };

    const handleModalClose = () => {
        form.resetFields();
        props.close();
    };
    return (
        <Modal
            width={ 600 }
            title={ props.title }
            visible={ props.visible }
            onCancel={ handleModalClose }
            footer={ null }
        >
            <Form
                { ...layout }
                name="debate"
                form={ form }
                onFinish={ handleSubmit }
            >
                <Form.Item
                    label="主题"
                    name="title"
                    rules={ [ { required: true, message: "请输入题目" } ] }

                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="内容"
                    name="content"
                    rules={ [ { required: true, message: "请输入内容" } ] }>
                    <TextArea rows={ 4 } />
                </Form.Item>
                <Form.Item
                    label="正方观点"
                    name="sideViewPoint"
                    rules={ [ { required: true, message: "请输入正方观点" } ] }
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="正方观点"
                    name="consideViewPoint"
                    rules={ [ { required: true, message: "请输入反方观点" } ] }
                >
                    <Input />
                </Form.Item>
                <div style={ { textAlign: "center" } }>
                    <Button onClick={ handleReset }>重置</Button>
                    <Button htmlType="submit" type="primary" style={ { marginLeft: "20px" } }>提交</Button>
                </div>
            </Form>
        </Modal >
    );
}

export default DebateModal;